<template>
	<view style="padding-bottom: 100rpx;">
		<!-- <van-search @blur="handleSearch" @search="handleSearch" use-action-slot @clear="onClear" @change="searchText = $event.detail" :value="searchText" placeholder="请输入耗材名称进行搜索" >
			<view slot="action" @click="handleSearch">搜索</view>
		</van-search> -->
		<view class="search">
			<view class="search-box">
				<view class="icon">
					<image src="../../static/icon/search.png"></image>
				</view>
				<input @input="handleInput" v-model="searchText"  type="text" @confirm="handleSearch" confirm-type="search"
					class="search-input" placeholder="请输入耗材名称进行搜索">
			</view>
			<view style="margin-left: 20rpx;" @click="resetSearch">重置</view>
		</view>
		
		<view v-if="list.length">
			<view class="check-all-box">
				<evan-checkbox shape="square" @change="handleChange" v-model="checked">全选</evan-checkbox>
				<!-- <checkbox @click="handleChange" :value="checkAll" color="#1152FC" :checked="checkAll" />
				<text style="margin-left: 20rpx;">全选</text> -->
			</view>
			<evan-checkbox-group  @change="onGroupChange">
				<view class="material-item-box" v-for="(item,index) in list" :key="item['物料id']">
					<view style="margin-bottom: 20rpx;">
						<evan-checkbox  shape="square" :label="item.id" v-model="item.checked">{{item['物料名称']}}</evan-checkbox>
						<!-- <text style="margin-left: 20rpx;">{{}}</text> -->
					</view>
					<view class="content-item">
						<text class="item-name">耗材编码：</text>
						<view class="right-content">{{item['物料编码']}}</view>
					</view>
					<view class="content-item">
						<text class="item-name">耗材类型：</text>
						<view class="right-content">{{item['物料类别名称']}}</view>
					</view>
					<view class="content-item">
						<text class="item-name">品牌：</text>
						<view class="right-content">{{item['品牌']}}</view>
					</view>
					<view class="content-item">
						<text class="item-name">规格型号：</text>
						<view class="right-content">{{item['规格型号']}}</view>
					</view>
					<view class="content-item">
						<text class="item-name">可退库数量：</text>
						<view class="right-content">{{item['物料数量']}}</view>
					</view>
					<view class="content-item">
						<text class="item-name">退库数量：</text>
						<van-stepper @change="onChange(index, $event)" input-width="120rpx" button-size="64rpx" :value="item['数量']" min="1" :max="item['物料数量']" />
					</view>
				</view>
			</evan-checkbox-group>
		</view>
		<view v-else>
			<van-empty description="暂无耗材"></van-empty>
		</view>
		<button @click="handleSubmit" class="material-form-btn">提交</button>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText: '',
				params: {
					人员id: null,
					pagination: {
						current: 1,
						pageSize: 100
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				// checked: false,
				isCheckAll: false,
				checkAll: false,
				list: [],
				cloneList: [],
				timerId: null
			}
		},
		onLoad(options) {
			this.params.人员id = uni.getStorageSync('userInfo').id
			// this.params.仓库id = +options.id
			this.getGoodsList()
		},
		watch: {
			searchText() {
				if(this.searchText == '') {
					this.list = [...this.cloneList]
				}
			}
		},
		computed: {
			checked: {
				get(){
					return this.list.every(item => item.checked)
				},
				set() {
					console.log('set')
				}
			}
		},
		methods: {
			handleInput() {
				// console.log('发出?')
				clearTimeout(this.timerId) 
				this.timerId = setTimeout(() => {
					this.list = this.cloneList.filter(item => item['物料名称'].includes(this.searchText))
				}, 300)
			},
			resetSearch() {
				this.list = [...this.cloneList]
				this.searchText = ''
				let flag = this.list.every(item => item.checked)
				// console.log('list', this.list)
				if(flag) {
					this.checked = true
				}else {
					this.checked = false
				}
			},
			handleSearch() {
				this.list = this.cloneList.filter(item => item['物料名称'].includes(this.searchText))
			},
			async getGoodsList() {
				uni.showLoading()
				const res = await this.$http.post('/property/workerStuffRecord/list', this.params)
				console.log(res)
				if(res.code === 10000) {
					console.log(res)
					// let list = res.data.list.map(item => item['材料清单'])
					// let newList = list.reduce((a,b) => { return a.concat(b)})
					// let arrList = []
					// newList.forEach(item => {
					// 	item.可退库数量 = item.数量
					// 	item.数量 = 1
					// 	const index = arrList.findIndex(x => x.物料id == item.物料id )
					// 	if(index > -1) {
					// 		arrList[index].可退库数量 += item.可退库数量	
					// 	}else {
					// 		arrList.push(item)
					// 	}
					// })
					// arrList.forEach(item => {
					// 	item.总价  = item.数量 * item.单价
					// })
					res.data.list & res.data.list.forEach(item => {
						item.checked = false
						item.数量 = 1
						item.单价 = item.平均单价
						item.总价 = item.平均单价
					})
					this.list = res.data.list || []
					console.log('list', this.list)
					this.cloneList = JSON.parse(JSON.stringify(res.data.list))
				}
			},
			onChange(index, event) {
				this.list[index].数量 = event.detail
				this.list[index].总价 = event.detail * this.list[index].单价
			},
			handleChange(val) {
				for(let i = 0; i < this.list.length; i++) {
					this.list[i].checked = val
				}
			},
			onGroupChange(e) {
				console.log(e)
			},
			handleSubmit() {
				let selectList = this.list.filter(item => item.checked)
				if(!selectList.length) {
					uni.showToast({
						title: '请选择耗材',
						icon: 'none'
					})
					return
				}
				if(uni.getStorageSync('selectList')) {
					let list = uni.getStorageSync('selectList')
					for(let i = 0; i < selectList.length; i++) {
						const index = list.findIndex(item => item.物料id === selectList[i].物料id)
						if(index > -1) {
							list[index].退库数量 += selectList[i].退库数量
							if(list[index].退库数量 > list[index].数量) {
								list[index].退库数量 = list[index].数量
							}
						}else {
							list.push(selectList[i])
						}
					}
					uni.setStorageSync('selectList', list)
				}else {
					uni.setStorageSync('selectList', selectList)
				}
				
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		// margin-left: 100rpx;
		padding-left: 60rpx;
		width: 750rpx;
		height: 96rpx;
		background-color: #fff;
		display: flex;
		border: 2rpx solid #f5f5f5;
		align-items: center;
		// justify-content: center;
		position: relative;

		// padding-left: 50rpx;
		.search-box {
			width: 564rpx;
			height: 56rpx;
			padding-left: 17rpx;
			padding-right: 10rpx;
			color: #999;
			// background-color: pink;
			border: 2rpx solid #595959;
			border-radius: 28rpx;
			display: flex;

			//position: relative;
			.icon {
				width: 50rpx;
				height: 46rpx;
				margin-top: 3rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
			.search-input {
				flex: 1;
				height: 100%;
				color: #999;
				position: relative;
			}
			.clear-icon {
				width: 44rpx;
				height: 44rpx;
				color: #fff;
				border-radius: 50%;
				line-height: 40rpx;
				text-align: center;
				margin-top: 4rpx;
				background-color: #c8c9cc;
			}
		}
	}
	.check-all-box {
		padding-left: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
	}
	.material-item-box {
		width: 710rpx;
		margin-left: 20rpx;
		padding: 30rpx;
		height: 480rpx;
		// background-color: pink;
		border-bottom: 2rpx solid #ccc;
		.content-item {
			margin-bottom: 10rpx;
			// height: 72rpx;
			// padding: 20rpx 20rpx 20rpx 0;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			view {
				font-size: 32rpx;
			}
			.item-name {
				width: 250rpx;
				margin-right: 20rpx;
			}
			.right-content {
				flex: 1;
				word-break: break-all;
				padding-right: 30rpx;
			}
		}
	}
</style>
